<template>
  <div>
    <div class="pdt20"></div>
    <van-cell-group inset>
      <van-form @submit="onSubmit">
        <div v-if="(route.query.ID_MaintainPlan != 0)">
          <div class="title">{{ category[deviceInfo.Category] }}信息</div>
          <Popover
            :required="false"
            label="配件费用"
            Type="digit"
            v-model="formData.Fittings"
          />
          <Popover
            :required="false"
            label="配件说明"
            Type="input"
            v-model="formData.Fittings_Remark"
          />
          <Popover
            :required="false"
            label="工时损失费"
            Type="digit"
            v-model="formData.WorkHours"
          />
          <Popover
            :required="false"
            label="损失说明"
            Type="input"
            v-model="formData.WorkHours_Remark"
          />
          <Popover
            :required="false"
            label="委外费用"
            Type="digit"
            v-model="formData.Outsource"
          />
          <Popover
            :required="false"
            label="委外说明"
            Type="input"
            v-model="formData.Outsource_Remark"
          />
          <Popover
            :required="false"
            label="其他费用"
            Type="digit"
            v-model="formData.Other"
          />
          <Popover
            :required="false"
            label="其他说明"
            Type="input"
            v-model="formData.Other_Remark"
          />
          <van-field v-model="totalFee" label="总费用" :readonly="true" />
          <div class="title">方案项</div>
          <van-cell-group>
            <van-cell v-for="item in planList">
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <span class="myLabel">{{ item.Code }}</span>
                <span class="mgl20">{{ item.Content }}</span>
              </template>
              <template #value>
                <van-switch
                  v-model="item.State"
                  active-value="1"
                  inactive-value="2"
                  size="20"
                />
              </template>
            </van-cell>
          </van-cell-group>
        </div>

        <van-field :label="checkType[deviceInfo.Category] + '结果'">
          <template #input>
            <van-radio-group
              v-if="deviceInfo.Category == 1"
              v-model="formData.Finish_Result"
              direction="horizontal"
            >
              <van-radio name="1">合格</van-radio>
              <van-radio name="2">不合格</van-radio>
            </van-radio-group>
            <van-radio-group
              v-if="deviceInfo.Category == 2"
              v-model="formData.Finish_ResultTools"
              direction="horizontal"
            >
              <van-radio name="1">正常</van-radio>
              <van-radio name="2">降级</van-radio>
              <van-radio name="3">报废</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <Popover
          v-model="formData.Remark"
          :required="false"
          Type="textarea"
          label="备注"
        />
        <Popover
          label="附件"
          :required="false"
          :detail="false"
          Type="file"
          v-model="formData.Files"
        />

        <van-button
          class="mgt20 mgb20"
          round
          block
          type="primary"
          native-type="submit"
        >
          提交
        </van-button>
      </van-form>
    </van-cell-group>
  </div>
</template>

<script setup name="DeviceMaintain">
import {
  GetMaintainPlanDetail,
  DeviceEndMaintain,
} from "@/api/teachDevice/maintain.js";
import { computed, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetDeviceDetail } from "@/api/teachDevice/account.js";
import { category, checkType } from "@/views/Amobile/DeviceManage/conmon.js";
import defaultSettings from '@/settings';
const router = useRouter();
const route = useRoute();
const formData = ref({
  Fittings: "", //配件费用
  Fittings_Remark: "", //配件说明
  WorkHours: "", //工时损失费用
  WorkHours_Remark: "", //工时损失说明
  Outsource: "", //委外费用
  Outsource_Remark: "", //委外说明
  Other: "", //其他费用
  Other_Remark: "", //其他说明
  Total: "", //总费用 (把上面几项费用相加)
  Remark: "", //备注说明
  Finish_Result: "1",
  Finish_ResultTools: "1", //工具保养结果 - 1:正常 2:降级 3:报废
});
const planList = ref([]);
const deviceInfo = ref({});
const totalFee = computed({
  get: () => {
    return (
      Number(formData.value.Fittings) +
      Number(formData.value.WorkHours) +
      Number(formData.value.Outsource) +
      Number(formData.value.Other)
    );
  },
  set: (v) => {
    console.log(v);
  },
});

onMounted(() => {
  getDetail();
});

async function getDetail() {
  try {
    let res = await GetMaintainPlanDetail({ ID: route.query.ID_MaintainPlan });
    res.data.Items?.forEach((item) => {
      item.State = "1";
    });
    planList.value = res.data.Items;
    let deviceInfoData = await GetDeviceDetail({ ID: route.query.DeviceID });
    deviceInfo.value = deviceInfoData.data.Info;
    document.title =
    '开始' + checkType[deviceInfo.value.Category] +  ' - ' + defaultSettings.title;
  } catch (error) {
    console.log(error);
  }
}

function reset() {
  formData.value = {
    Fittings: "", //配件费用
    Fittings_Remark: "", //配件说明
    WorkHours: "", //工时损失费用
    WorkHours_Remark: "", //工时损失说明
    Outsource: "", //委外费用
    Outsource_Remark: "", //委外说明
    Other: "", //其他费用
    Other_Remark: "", //其他说明
    Total: "", //总费用 (把上面几项费用相加)
    Remark: "", //备注说明
    Finish_Result: "", //保养结果 - 1:合格 2:不合格
    Finish_ResultTools: "", //工具保养结果 - 1:正常 2:降级 3:报废
  };
  maintainFile.value = [];
}
async function onSubmit() {
  try {
    let query = {
      ...formData.value,
      Total: totalFee.value,
      ID: route.query.LogID,
      Files:
        formData.value.Files?.map((item) => {
          return {
            FileID: item.ID,
            Sort: item.Sort,
          };
        }) || [],
      Items: planList.value,
    };
    await DeviceEndMaintain(query);
    router.push({
      path: "/DeviceManage/MaintainLogList",
      query: { ID: route.query.DeviceID },
    });
  } catch (error) {
    console.log(error);
  }
}
</script>

<style lang="scss" scoped>
.title{
  position: relative;
  padding: 10px;
  font-weight: bold;
  // padding-left: 20px;
  &::before{
    content: '';
    position: absolute;
    width: 4px;
    height: 20px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background-color: #1989fa;
    border-radius: 2px;
  }
}
.myLabel {
  font-weight: 700;
  color: #656569;
}
</style>
